<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Js点击切换Tab</title>
<style type="text/css">
  *{
 padding: 0;
 margin: 0;
}
#tab{
  margin-top:100px;
  margin-left: 100px;
}
#tab li{
 width:50px;
 height: 30px;
 line-height: 30px;
 border:1px solid #cccccc;
 text-align:  center;
 float:left;
 display:inline;
 margin-right: 10px;
 border-bottom: 0px;
 color: blue;
}

#tabCon {
  clear:both;
  margin-top:20px;
  margin-left: 100px;
  border:1px solid #cccccc;
  width:155px;
  height: 100px;
  padding:10px;
}
#tabCon div {
 display:none;
}
#tabCon div.fdiv {
 display:block;
}
.fli{
	background-color: #999999;
}

</style>

</head>
<body>
<div id="tanContainer">
	 <div id="tab">
		 <ul>
		  <li class="fli">实事</li>
		  <li>体育</li>
		  <li>新闻</li>
		 </ul>
	 </div>
	 <div id="tabCon">
		 <div class="fdiv">实事内容</div>
		 <div>体育内容</div>
		 <div>新闻内容</div>
	</div>
</div>
</body>
<script>
window.onload = init;
function init(){
     var tab = document.getElementById('tab');
     var lis = tab.getElementsByTagName('li');
     var tabCon = document.getElementById('tabCon');
     var divs = tabCon.getElementsByTagName('div');

     for(var i=0;i<lis.length;i++){
     	lis[i].onclick=function(){
     		for(var j=0;j<lis.length;j++){
               if(this == lis[j]){
                  lis[j].className='fli';
                  divs[j].className='fdiv';
               }else{
               	  lis[j].className='';
                  divs[j].className='';
               }
     		}
     	}
     }
}      
</script>
</html>
